import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  Alert,
  Image,
} from 'react-native';

const login = () => {
  const [usename, setUsename] = useState('');
  const [password, setPassword] = useState('');
  const loginFn = () => {
    Alert.alert(usename + '---' + password);
  };
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.text}>欢迎登录</Text>
        <TextInput
          style={styles.input}
          placeholder="请输入用户名"
          value={usename}
          onChangeText={val => setUsename(val)}
        />
        <TextInput
          style={styles.input}
          placeholder="请输入密码"
          clearButtonMode={'while-editing'}
          secureTextEntry={true}
          keyboardType={'number-pad'}
          value={password}
          onChangeText={val => setPassword(val)}
        />
      </View>

      <View style={styles.button}>
        <Button title="登录" onPress={() => loginFn()} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    width: '100%',
    height: '100%',
    // backgroundColor:'#fff',
  },
  text: {
    marginTop: 40,
    marginBottom: 40,
    marginLeft: 12,
    fontSize: 50,
    textAlign: 'center',
    color: '#000',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor: '#ccc',
    borderRadius: 10,
  },
  button: {
    marginLeft: 12,
    marginRight: 12,
  },
  img: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
});

export default login;
